import React, { useEffect, useState } from "react";
import { Button, Container, ListGroup, ListGroupItem } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import { Task } from "../core/model/Model";

const MyTasks:React.FC = ()=> {
    
    // const navigate = useNavigate();
    
    const [tasks,setTasks] = useState<Array<Task<any,any>>>()

    useEffect(()=>{
        const data = [{
            name:"Task 1",
            id:"1",
        }]
        const tks = data.map((data)=>{
            return new Task({name:data.name,id:data.id,createtime:"2024-10-01:9:00",creator:"John"})
        })
        setTasks(tks)
    },[])

    return (<Container fluid className="d-flex p-1">
        <ListGroup className="m-1 p-0 w-100">
            {tasks?.map((task,idx)=>{
                return (<ListGroupItem key={`task-${idx}`} className="m-0 p-0">
                    <Container fluid className="d-flex p-0 flex-row  justify-content-between p-2">
                        <Container className="flex-grow-1">
                            <p>{task.name}</p>
                            <p>{task.createtime}</p>
                            <p>{task.creator}</p>
                            <p>{task.getStepDesc()}</p>
                        </Container>
                        <Container className="d-flex flex-row align-self-end w-25 justify-content-end">
                            <Button>Download</Button>
                        </Container>
                    </Container>
                </ListGroupItem>)
            })}
        </ListGroup>
    </Container>)
}

export default MyTasks;